<template>
	<div class="whole_wrapper">
		<!-- 头部 -->
		<div class="header">
			<div>
				<img src="http://gudian-lndx.oss-cn-hangzhou.aliyuncs.com/logo/69a3afc43f0d441a924603212d9dddde.png" />
			</div>
			<router-link to="/" class="icon_1" style="color:#000;">
				<div class="index">首页</div>
			</router-link>
			<router-link to="/course" class="icon_1" style="color:#000;">
				<div class="course">课程中心</div>
			</router-link>
		</div>

		<!-- 轮播 -->
		<div class="banner">
			<img src="http://gudian-lndx.oss-cn-hangzhou.aliyuncs.com/advertise/1277899617453887489.png" />
		</div>

		<!-- 视频 -->
		<div class="video_wrapper">
			<div class="video">
				<div class="video_top">
					<div>热门课程</div>
					<router-link to="/course" class="icon_1" style="font-size: 14px;color: #999;">
						<div>更多课程 ></div>
					</router-link>
				</div>
				<div class="video_body">
					<div class="video_body_first" v-for="item in hotVideoList" @click="goVideo(item)">
						<img :src="item.courselogo" />
						<div><span>{{item.coursename}}</span></div>
					</div>
				</div>
			</div>
		</div>

		<!-- 底部 -->
		<div class="footer">
			<div class="footer_top">
				<div>官方微信</div>
				<!-- <div class="line">_</div> -->
			</div>
			<div class="friend_link">友情链接: <a href="http://www.jnlnrdx.com/">老年大学官网</a></div>
			<div class="copyright">版权所有©济南老年人大学</div>
			<div class="number">| 备ICP案19030346 | <img src="http://119.163.126.25:3000/_nuxt/assets/image/prn_icon.png" /></div>
		</div>
	</div>
</template>

<script>
	import axios from 'axios'
	export default {
		name: 'index',
		data() {
			return {
				hotVideoList: []
			}
		},
		created() {
			this.getvideo()
		},
		methods: {
			getvideo() {
				axios({
					method: "get",
					url: "http://119.163.126.25:8083/blade-app/course/pageBySearch",
					params: {
						current: 1,
						size: 10,
					}
				}).then((res) => {
					console.log(res)
					console.log(res.data.data.records)
					var hotVideoList = res.data.data.records;
					this.hotVideoList = hotVideoList;
				}).catch((err) => {
					console.log(err)
				})
			},
			goVideo(item) {
				this.$router.push({
					path: '/video',
					query: {
						video: item
					}
				})
			}
		}
	}
</script>


<style scoped>
	.whole_wrapper {
		/* margin-bottom: 100px; */
	}

	/* 头部 */
	.header {
		height: 150px;
		width: 80%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		font-size: 18px;
	}

	.index {
		margin-left: 20px;
	}

	.course {
		margin-left: 20px;
	}

	.header img {
		width: 247px;
		height: 52px;
	}


	/* 轮播*/
	.banner {
		width: 100%;
	}

	.banner img {
		width: 100%;
	}

	/* 视频 */
	.video_wrapper {
		background: whitesmoke;
	}

	.video {
		width: 80%;
		margin: 0 auto;
	}

	.blank_line {
		display: inline-block;
		width: 4px;
		height: 24px;
		background: #333;
		position: relative;
		top: 4px;
	}

	.video_top {
		padding-top: 50px;
		width: 100%;
		display: flex;
		justify-content: space-between;
		font-size: 14px;
		color: #999;
	}

	/* .video_body {
		margin-top: 50px;
		display: flex;
		font-size: 14px;
		color: #999;
	}

	.video_body_first {
		width: 285px;
		background-color: #fff;
		border-radius: 6px;
	}

	.video_body_first img {
		width: 285px;
		height: 140px;
	}

	.video_body_first div {
		width: 285px;
		height: 100px;
		padding-left: 10px;
	} */
	/*
	.video_body_first:not(:first-child) {
		margin-left: 20px;
	}
 */

	/* 视频 */
	/* .video {
		width: 100%;
		background: whitesmoke;
		padding-top: 10px;
		height: auto;
		background: whitesmoke;
		padding: 30px 0 10px 0;
		display: block;
	} */

	.video_body {
		/* height: 300px; */
		margin-top: 50px;
		display: flex;
		/* padding: 20px 200px; */
		flex-wrap: wrap;
		background: whitesmoke;
	}

	.video_body_first {
		width: 285px;
		/* background-color: #fff; */
		border-radius: 6px;
		flex: 0 0 19%;
		margin: 5px;

	}

	.video_body_first img {
		width: 285px;
		height: 140px;
	}

	.video_body_first div {
		width: 285px;
		height: 90px;
		background-color: #fff;
		padding: 10px 0px;
	}

	.video_body_first div span {
		padding: 10px;
	}


	/*
	.video_body_first:not(:first-child) {
		margin-left: 20px;
	} */
	/* 底部 */
	.footer {
		background-color: #333333;
		/* border: 1px solid blue; */
		height: 200px;
		color: #fff;
		padding-top: 60px;
		color: #fff;
	}

	.footer_top {
		width: 80%;
		margin: 0 auto;
		padding-bottom: 30px;
		border-bottom: 1px solid #666666;
		font-size: 18px;
	}

	.line {
		font-weight: bold;
		font-size: 40px;
	}

	.friend_link {
		width: 1200px;
		margin: 0 auto;
		margin-top: 10px;
		font-size: 14px;
	}

	.friend_link a {
		color: #ccc;
		margin: 0px 10px;
	}

	.copyright {
		background: #666666;
		height: 30px;
		line-height: 30px;
		text-align: center;
		color: #ccc;
		margin-top: 25px;
	}

	.number {
		line-height: 30px;
		text-align: center;
		color: #ccc;
	}

	.number img {
		width: 16px;
		height: 16px;
		position: relative;
		top: 10px;
	}
</style>
